<template>
  <div>
    <div class="typeList" v-for="(item,index) in eventTypeData">
      <div class="childWrapper">
        <div class="name">{{ item.name }}</div>
        <div class="childList">
          <div class="heightWrapper">
            <el-checkbox
              v-model="checkAllArr[index]"
              @change="checkedAll"
              @click="clickAll(index)"
              :indeterminate="isIndeterminateArr[index]"
            >不限
            </el-checkbox
            >
            <el-checkbox-group :class="showExpandBtnstatus[index] ? 'showExpand':'normal'"
                               v-model="checkedEventType[index]"
                               @change="handleCheckedCitiesChange"
            >
              <div class="trueHeightClass">
                <el-checkbox v-for="(citem,cindex) in item.values" :key="cindex" :label="citem.code"
                             @click="clickAll(index)">
                  {{
                    citem.name
                  }}
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
          <div class="rightOption" v-if="showExpandBtnArr[index]" @click="clickExpand(index)">
            {{ showExpandBtnstatus[index] ? '收起' : '展开' }}
            <span class="icon vicon"
                  :class="showExpandBtnstatus[index]?'vi-arrow-up':'vi-arrow-down'"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {getEventType} from "@/views/modules/esg/apis";

const checkedEventType = $ref<any>([]); //存储每一个类的选中情况
const checkAllArr = $ref<any>([]);  //全选状态
const isIndeterminateArr = $ref<any>([]); //记录全选半选的判断
const showExpandBtnArr = $ref<any>([]);  //是否需要显示展开收起按钮
const showExpandBtnstatus = $ref<any>([]); //按钮展开收起状态
let clickAllIndex = $ref(0);    //全选的当前点击index
let intialHeight = 32;   //初始高度(展开收起判断用)
const emit = defineEmits(['changeSelect']);
const {data: eventTypeData} = useRequest(getEventType, {
  onSuccess: (data) => {
    data.forEach((item, index) => {
      checkAllArr[index] = false
      isIndeterminateArr[index] = false
      showExpandBtnArr[index] = false
      showExpandBtnstatus[index] = false
      checkedEventType[index] = []
    })
    nextTick(() => {
      (document.querySelectorAll('.trueHeightClass') as any)?.forEach((item, index) => {
        showExpandBtnArr[index] = item.clientHeight > intialHeight
      })
    })
  }
})

//点击展开收起
const clickExpand = (index) => {
  showExpandBtnstatus[index] = !showExpandBtnstatus[index]
}

//事件类型全选
const checkedAll = (data) => {
  isIndeterminateArr[clickAllIndex] = false;
  if (data) {
    eventTypeData.value[clickAllIndex].values.forEach((item, index) => {
      if (checkedEventType[clickAllIndex].indexOf(item.code) < 0) {
        checkedEventType[clickAllIndex].push(item.code)
      }
    })
  } else {
    eventTypeData.value[clickAllIndex].values.forEach((item, index) => {
      checkedEventType[clickAllIndex] = []
    })
  }
  emit('changeSelect', getValues())
}
//获取点击的全选index
const clickAll = (index) => {
  clickAllIndex = index
  console.log('index', index)
}
//事件类型单选
const handleCheckedCitiesChange = (value: string[]) => {
  console.log(value)
  const checkedCount = value.length
  checkAllArr[clickAllIndex] = checkedCount === eventTypeData.value[clickAllIndex].values.length
  isIndeterminateArr[clickAllIndex] = checkedCount > 0 && checkedCount < eventTypeData.value[clickAllIndex].values.length;
  emit('changeSelect', getValues())
}

interface multipleFilterOptionExpose {
  getValues: () => any;
}

//勾选的值进行格式化
const getValues = () => {
  const typeArr: string[] = [];
  checkedEventType.forEach((item) => {
    item.forEach((citem: string) => {
      typeArr.push(citem)
    })
  })
  return typeArr.join(',')
};
defineExpose<multipleFilterOptionExpose>({
  getValues
});
</script>

<style scoped lang="scss">
.childList {
  display: flex;
  justify-content: space-between;
  width: 80vw;
  min-width: 1000px;

  .heightWrapper {
    display: flex;
  }

  .showExpand {
    height: auto;
  }

  .normal {
    height: 32px;
    overflow: hidden;
    flex: 1 1;
  }

  .rightOption {
    width: 100px;
    flex-shrink: 0;
    font-size: 14px;
    color: #111;
    padding-top: 6px;
    cursor: pointer;

    span {
      color: #8B8C8C;
    }
  }
}

.typeList {
  margin-top: 9px;

  .childWrapper {
    display: flex;

    .name {
      flex-shrink: 0;
      width: 100px;
      display: inline-flex;
      align-items: flex-start;
      font-size: 13px;
      color: #606266;
      margin-top: 6px;
    }
  }
}

:deep(.el-checkbox-group) {
  //display: inline;
  margin-left: 30px;
}


</style>
